$activecolor: #508cee
$btncolor: #c8c8c8
@mixin bg($url)
  background-image: url($url)
  background-position: top center
  background-size: 100% auto
  background-repeat: no-repeat

::-webkit-input-placeholder
  font-size: 16px
  color: #c8c8c8
  font-family: "Microsoft YaHei"

#app, .layout
  width: 100%
  height: 100%

*
  box-sizing: border-box
  font-family: "Microsoft YaHei"

.relative
  position: relative !important

.btn-group
  position: absolute
  top: 0
  right: .3rem

a
  text-decoration: none
  color: white

html, body
  width: 100%
  height: 100%
  background-color: white
  font-size: 50px

.line
  width: 100%
  border-bottom: .1rem solid #F7F7F7

input
  border: none
  background-color: white
  outline: none

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button 
  -webkit-appearance: none !important
  margin: 0


.c-search
  input[disabled]
    -webkit-text-fill-color: #000 !important
    -webkit-opacity: 1 !important
    color: #000 !important

.per_List
  border-bottom: 1px solid #F7F7F7 !important

input:-webkit-autofill
  -webkit-box-shadow: 0 0 0px 1000px white inset !important

.icon-close
  font-size: .2rem

.footer
  position: fixed
  bottom: 0
  width: 100%
  display: flex
  flex-flow: row
  background-color: white
  justify-content: space-around
  height: 1rem
  color: #787878
  padding-top: 0.15rem
  border-top: 1px solid #e3e3e3
  a
    font-size: .3rem
    color: #787878
    display: flex
    flex-flow: column
    align-items: center
    text-align: center
  i
    display: inline-block
    width: 0.46rem
    height: 0.46rem
    background-size: 0.46rem
    background-position: center
    @include bg("../icon/dingdan.png")
  .icon-mechat
    @include bg("../icon/shanghu.png")
  .icon-data
    @include bg("../icon/shuju.png")
  .icon-mine
    @include bg("../icon/wode.png")
  .router-link-active
    color: $activecolor
    .icon-order
      @include bg("../icon/dingdan_a.png")
    .icon-mechat
      @include bg("../icon/shanghu_a.png")
    .icon-data
      @include bg("../icon/shuju_a.png")
    .icon-mine
      @include bg("../icon/wode_a.png")
//dialog
.dialog
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 100%
  transition: all .6s ease
  .shade
    width: 100%
    height: 100%
    background-color: rgba(0, 0, 0, 0.2)
    display: flex
    justify-content: center
    align-items: center
  .content
    width: 5.2rem
    height: 1.7rem
    background-color: white
    border-radius: 0.2rem
  .btn
    width: 100%
    height: 0.75rem
    border-top: 1px solid #c8c8c8
    font-size: 16px
    color: $activecolor
    text-align: center
    line-height: 0.76rem
  .text
    text-align: center
    line-height: 0.95rem
    font-size: 16px
    color: black

.iconCell
  position: relative

.iconfont
  color: #a0a0a0
  top: 0
  right: 0
  font-size: .3rem
  position: absolute
  line-height: .8rem

.search
  position: fixed
  top: 0
  left: 0
  font-size: 14px
  z-index: 100
  display: flex
  flex-flow: row
  align-items: center
  width: 100%
  height: 0.86rem
  background-color: white
  padding: 0 0.3rem
  border-bottom: 1px solid #eeeeee

.header-action-icon
  padding: .2rem

.headAction
  position: absolute
  z-index: 10000
  padding: 0 0.2rem
  right: 0.3rem
  top: 0.86rem
  width: 4.6rem
  background-color: white
  border-radius: 2px
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)
  font-size: 14px
  .menuShade
    background: none
    position: fixed
    width: 100%
    height: 100%
    top: 0
    left: 0
    z-index: -1
  li
    line-height: 1.3rem
    font-size: 18px
    border-bottom: 1px solid #d0d0d0
    color: #787878
    text-align: center
    @include bg("../icon/dqs.png")
    background-position: left center
    background-size: 0.5rem auto
  li.active
    color: $activecolor
  li:nth-child(1).active
    background-image: url("../icon/dqsa.png")
  li:nth-child(2).active
    background-image: url("../icon/dtja.png")
  li:nth-child(2)
    background-image: url("../icon/dtj.png")
  li:nth-child(3)
    background-image: url("../icon/ycd.png")
  li:nth-child(3).active
    background-image: url("../icon/ycda.png")
  li:last-child
    background-image: url("../icon/yqc.png")
    border-bottom: none
  li:last-child.active
    background-image: url("../icon/yqca.png")

header
  .header
    width: 100%
    height: 1rem
    padding: 0 0.3rem
    display: flex
    flex-flow: row
    align-items: center
    background-color: white
  .icon-fanhui
    width: 0.36rem
    height: 0.36rem
    @include bg("../icon/fanhui.png")
  .text
    width: 100%
    font-size: 18px
    color: $activecolor
    text-align: center
  .icon-list
    width: 0.36rem
    height: 0.36rem
    justify-self: flex-end
    @include bg("../icon/list.png")

.page-shade
  position: fixed
  left: 0
  top: 0
  width: 100%
  height: 100%
  background-color: rgba(0, 0, 0, 0.3)
  z-index: 100
  .mu-picker
    position: absolute
    left: 0
    bottom: 0
    background-color: white
    height: 3.6rem
    -webkit-mask-box-image: none
    .mu-picker-item
      font-size: 16px

.red
  color: #F33530
